<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Changing Column a lot</title>

  <link rel="stylesheet" href="../../../demo/demo.css"/>
  <script src="../../../dist/gridstack-all.js"></script>

</head>
<body>
  <div class="container-fluid">
    <h1>Changing Column 5 x 12 causing overlap https://github.com/gridstack/gridstack.js/issues/1785</h1>
    <div>
      <a class="btn btn-primary" onClick="next()" href="#">Next</a>
      <a class="btn btn-primary" onclick="auto()" href="#">Auto</a>
    </div>

    <div class="grid-stack"></div>
  </div>
  <script src="events.js"></script>
  <script type="text/javascript">
    let count = 0;
    let grid;
    let items = [ 
      // simplest case data would show the issue at 7 column (overlapping 0 & 2)
      // {x: 0, y: 0},
      // {x: 2, y: 0, w: 3},
      // {x: 0, y: 1, w: 2},
      // {x: 3, y: 1, h: 2},
      // {x: 6, y: 6, w: 3, h: 2}
    ];
    items.forEach(item => item.content = String(count++));

    function addNewWidget() {
      var node = items[count] || {
        x: Math.round(12 * Math.random()),
        y: Math.round(5 * Math.random()),
        w: Math.round(1 + 3 * Math.random()),
        h: Math.round(1 + 3 * Math.random())
      };
      node.content = String(count++);
      if (grid) {
        grid.addWidget(node);
      } else {
        items.push(node);
      }
    };

    grid = GridStack.init({cellHeight: 50, margin: 5}).load(items);
    let column = 1;
    for (i=0; i<7; i++) addNewWidget(); // load 7 random items

    function next() {
      setColumn(column++);
      if (column > 12) { column = 1; }
    }
    function auto() {
      for (let i = 1; i <= 12; i++) {
        setColumn(i);
      }
    }
    function setColumn(n) {
      console.log("gridding at", n);
      grid.column(n);
      grid.compact();
    }
    for (let i = 1; i <= 5; i++) {
      auto();
    }
  </script>
</body>
</html>
